<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags"%>
<html>
<head>
	<tag:header />
	<!-- ECharts单文件引入 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/basestatic/echarts/echarts.js"></script>
    <style type="text/css">
        .th{
            font-weight: bold;
            font-size: 12px;
        }
        .td{
            font-weight: bold;
        }
        .td div{
            font-size: 16px;
        }
        .btnBar{
            background: #e9f1ff;
        }
        /*.clearfix:befor,*/
        /*.clearfix:after{*/
            /*content:'';*/
            /*display:block;*/
        /*}*/
        /*.clearfix{*/
            /*clear:both;*/
        /*}*/
        .row{
            width: 99%;
            overflow:hidden;
            /*border: solid 1px;*/
        }
        .left{
            float: left;
            width: 50%;
            padding: 5px 5px 15px 5px;
            /*border-bottom: dashed 1px;*/
            /*height: 100px;*/
            /*border: solid 1px;*/
        }
        .right{
            float: right;
            width: 45%;
            padding: 5px 5px 15px 5px;
            height: 40%;
            /*border-bottom: dashed 1px;*/
            /*height: 100px;*/
            /*border: solid 1px;*/
        }
        .left div{
            padding: 2px 5px 3px 5px;
        }
        .op{
            padding: 2px 5px 3px 19px;
        }
    </style>
</head>
<body id="main_layout">

<%--<!-- 为ECharts准备一个具备大小（宽高）的Dom -->--%>
<%--<div id="main" style="height:400px"></div>--%>
    <!-- 信息头 -->
    <div class="headerTable">
        <!--标题-->
        <div class="col" style="width: 35%;">
            <label class="th ">标题：</label>
            <div class="td">
                <div id="title"></div>
            </div>
        </div>
        <!--开始时间-->
        <div class="col" style="">
            <label class="th ">开始时间：</label>
            <div class="td">
                <div id="startTime"></div>
            </div>
        </div>
        <!--结束时间-->
        <div class="col" style="">
            <label class="th ">结束时间：</label>
            <div class="td">
                <div id="endTime"></div>
            </div>
        </div>
        <!--发送人-->
        <div class="col" style="">
            <label class="th ">发送人：</label>
            <div class="td">
                <div id="sender"></div>
            </div>
        </div>
    </div>
    <!-- 按钮 bar -->
    <div class="btnBar">
        <%--<span id="export_url">--%>
            <%--<a  href="${pageContext.request.contextPath}/api/ebms/surveyInfo/exportStatistics?surveyInfoId=<%=request.getParameter("id")%>" target="_blank">${pageContext.request.contextPath}/api/ebms/surveyInfo/exportStatistics?surveyInfoId=<%=request.getParameter("id")%></a>--%>
        <%--</span>--%>
        <a id="export_btn" target="_blank" href="${pageContext.request.contextPath}/api/ebms/surveyInfo/exportStatistics?surveyInfoId=<%=request.getParameter("id")%>" class="easyui-linkbutton" plain="true" iconcls="icon-20130406125519344_easyicon_net_16">导出</a>
    </div>
    <!-- 内容 -->
	<div id="content" style="height: 645px; overflow-y: scroll;overflow-x: auto;">
        <%--<div class="row">--%>
                <%--<div class="left">--%>
                    <%--<div class="QuestionTitle"><span class="SortNum">1、</span><span class="ct">请问您的性别是？</span></div>--%>
                    <%--<div class="OptionsA"><span class="op">A.</span><span class="ct">男</span></div>--%>
                    <%--<div class="OptionsB"><span class="op">B.</span><span class="ct">女</span></div>--%>

                <%--</div>--%>
                <%--<div class="right">--%>

                <%--</div>--%>
        <%--</div>--%>
	</div>

</body>

<script>

    // 路径配置
    require.config({
        paths: {
            echarts: '${pageContext.request.contextPath}/static/basestatic/echarts'
        }
    });

    // 问卷id
    var surveyInfoId = '<%=request.getParameter("id")%>';

    var echarts;

    var ec_option = {
        title : {
            text: '',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                show:true,
                type : 'value',
                min:0,
                max:100,
                axisLabel:{
                    formatter:function(string){
                        var res = string + '%';
                        return res;
                    }
                }
                // boundaryGap : ['10%', '100%']
            }
        ],
        yAxis : [
            {
                type : 'category',
                // data : ['A','B','C','D','E','F','G']
                data : ['G','F','E','D','C','B','A']
            }
        ],
        series : [
            {
                name:'',
                type:'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                tooltip:{
                    formatter:function(obj){
                        var r = $('body').data('res');
                        var sumMap =   r.sumList[obj[0].series._index];
                        var _name = obj[0][1];
                        var num = sumMap[_name];
                        var total = r.totalNum;
                        var res = _name + ' : ' + num + '/' + total + ' : ' + '(' + obj[0].data + '%' + ')';
                        return res;
                    }
                },
                data:[18203,18203, 23489, 29034, 104970, 131744, 630230]
            }
        ]
    };

    // onReady START
    jQuery(function ($) {

        // // 导出按钮
        // $('#export_btn').on('click',function(){
        //
        // });


        // 不习惯模块化的你当然可以
        require(['echarts','echarts/chart/bar'], function (ec){

            echarts = ec;
            // // 基于准备好的dom，初始化echarts图表
            // var  myChart = echarts.init(document.getElementById('main'));
            //
            // // 为echarts对象加载数据
            // myChart.setOption(option);

        });


        // 请求列表数据
        $.ajax({
            type: 'post',
            url: '${pageContext.request.contextPath}' + '/api/ebms/surveyInfo/getStatistics',
            data: {surveyInfoId:surveyInfoId}
        }).done(function (res) {
            $('body').data('res',res);
            // 添加表头信息
            $('#title').html(res.title);
            $('#startTime').html(res.startTime);
            $('#endTime').html(res.endTime);
            if(null == res.sender || '' == res.sender){
                $('#sender').html('--');
            }else{
                $('#sender').html(res.sender);
            }
            // 问题
            var questionList = res.questionList;
            // 回答率
            var rateList = res.rateList;
            // 显示dom
            var dis_arr = new Array();
            // 循环装配
            $.each(questionList,function(i,o){
                var rate = rateList[i];
                    dis_arr.push('<div class="row">');

                        dis_arr.push('<div class="left">');
                            dis_arr.push('<div class="questionTitle"><span class="sortNum">' + o.sortNum + '、</span><span class="ct">' + o.questionTitle + '</span></div>');
                            if(undefined != o.optionsA){
                                dis_arr.push('<div class="optionsA"><span class="op">A.</span><span class="ct">' + o.optionsA + '</span></div>');
                            }
                            if(undefined != o.optionsB){
                                dis_arr.push('<div class="optionsB"><span class="op">B.</span><span class="ct">' + o.optionsB + '</span></div>');
                            }
                            if(undefined != o.optionsC){
                                dis_arr.push('<div class="optionsC"><span class="op">C.</span><span class="ct">' + o.optionsC + '</span></div>');
                            }
                            if(undefined != o.optionsD){
                                dis_arr.push('<div class="optionsD"><span class="op">D.</span><span class="ct">' + o.optionsD + '</span></div>');
                            }
                            if(undefined != o.optionsE){
                                dis_arr.push('<div class="optionsE"><span class="op">E.</span><span class="ct">' + o.optionsE + '</span></div>');
                            }
                            if(undefined != o.optionsF){
                                dis_arr.push('<div class="optionsF"><span class="op">F.</span><span class="ct">' + o.optionsF + '</span></div>');
                            }
                            if(undefined != o.optionsG){
                                dis_arr.push('<div class="optionsG"><span class="op">G.</span><span class="ct">' + o.optionsG + '</span></div>');
                            }
                        dis_arr.push('</div>');

                        dis_arr.push('<div class="right">');

                        dis_arr.push('</div>');

                    dis_arr.push('</div>');
            });
            // 写入题目列表
            $('#content').html(dis_arr.join(''));



            // ec_option.xAxis[0]['boundaryGap'] = res.boundaryGap;
            for (var i = 0; i < rateList.length; i++){
                // 例子
                // ec_option['yAxis'][0]['data'] = ["G", "F", "E", "D", "C", "B", "A"];
                // ec_option['series'][0]['data'] = [18203, 18203, 23489, 29034, 104970, 131744, 630230];
                var _item = rateList[i];
                // 不是简答类型的题目 显示图表
                var yAxis_data_arr = new Array();
                var series_data_arr = new Array();
                if('2' != _item.questionType){
                    // 实际
                    if(undefined != _item.rateOptionsG){
                        yAxis_data_arr.push('G');
                        series_data_arr.push(_item.rateOptionsG);
                    }
                    if(undefined != _item.rateOptionsF){
                        yAxis_data_arr.push('F');
                        series_data_arr.push(_item.rateOptionsF);
                    }
                    if(undefined != _item.rateOptionsE){
                        yAxis_data_arr.push('E');
                        series_data_arr.push(_item.rateOptionsE);
                    }
                    if(undefined != _item.rateOptionsD){
                        yAxis_data_arr.push('D');
                        series_data_arr.push(_item.rateOptionsD);
                    }
                    if(undefined != _item.rateOptionsC){
                        yAxis_data_arr.push('C');
                        series_data_arr.push(_item.rateOptionsC);
                    }
                    if(undefined != _item.rateOptionsB){
                        yAxis_data_arr.push('B');
                        series_data_arr.push(_item.rateOptionsB);
                    }
                    if(undefined != _item.rateOptionsA){
                        yAxis_data_arr.push('A');
                        series_data_arr.push(_item.rateOptionsA);
                    }

                    // 赋值
                    ec_option['yAxis'][0]['data'] = yAxis_data_arr; //["G", "F", "E", "D", "C", "B", "A"];
                    ec_option['series'][0]['data'] = series_data_arr;
                    ec_option['series'][0]['_index'] = i;

                    // 创建图表
                    echarts.init($('.right')[i]).setOption(ec_option);
                }
                


            }





        }).always(function () {

        });


        // jQuery onReady END
	});

</script>


<%--<script type="text/javascript">--%>
    <%--// 路径配置--%>
    <%--require.config({--%>
        <%--paths: {--%>
            <%--echarts: 'http://echarts.baidu.com/build/dist'--%>
        <%--}--%>
    <%--});--%>

    <%--// 使用--%>
    <%--require(--%>
        <%--[--%>
            <%--'echarts',--%>
            <%--'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载--%>
        <%--],--%>
        <%--function (ec) {--%>
            <%--// 基于准备好的dom，初始化echarts图表--%>
            <%--var myChart = ec.init(document.getElementById('main'));--%>

            <%--option = {--%>
                <%--title : {--%>
                    <%--text: '世界人口总量',--%>
                    <%--subtext: '数据来自网络'--%>
                <%--},--%>
                <%--tooltip : {--%>
                    <%--trigger: 'axis'--%>
                <%--},--%>
                <%--legend: {--%>
                    <%--data:['2011年', '2012年']--%>
                <%--},--%>
                <%--toolbox: {--%>
                    <%--show : true,--%>
                    <%--feature : {--%>
                        <%--mark : {show: true},--%>
                        <%--dataView : {show: true, readOnly: false},--%>
                        <%--magicType: {show: true, type: ['line', 'bar']},--%>
                        <%--restore : {show: true},--%>
                        <%--saveAsImage : {show: true}--%>
                    <%--}--%>
                <%--},--%>
                <%--calculable : true,--%>
                <%--xAxis : [--%>
                    <%--{--%>
                        <%--type : 'value',--%>
                        <%--boundaryGap : [0, 0.01]--%>
                    <%--}--%>
                <%--],--%>
                <%--yAxis : [--%>
                    <%--{--%>
                        <%--type : 'category',--%>
                        <%--data : ['巴西','印尼','美国','印度','中国','世界人口(万)']--%>
                    <%--}--%>
                <%--],--%>
                <%--series : [--%>
                    <%--{--%>
                        <%--name:'2011年',--%>
                        <%--type:'bar',--%>
                        <%--data:[18203, 23489, 29034, 104970, 131744, 630230]--%>
                    <%--},--%>
                    <%--{--%>
                        <%--name:'2012年',--%>
                        <%--type:'bar',--%>
                        <%--data:[19325, 23438, 31000, 121594, 134141, 681807]--%>
                    <%--}--%>
                <%--]--%>
            <%--};--%>


            <%--// 为echarts对象加载数据--%>
            <%--myChart.setOption(option);--%>
        <%--}--%>
    <%--);--%>
<%--</script>--%>

</html>
